<!-- 装修用户组件：用户卡片 -->
<template>
	<view class="ss-user-info-wrap ss-p-t-80">
		<view class="ss-flex ss-col-center ss-row-between ss-m-b-20 outer-box">
			<view class="left-box ss-m-r-52">
				<button class="ss-reset-button" @tap="sheep.$router.go('/pages/user/announcement/message-center')">
					<image class="user-xiaoxi" :src="sheep.$url.static('/assets/img/user-xiaoxi@2x.png')" mode="aspectFill"></image>
				</button>
				<button class="ss-reset-button" @tap="sheep.$router.go('/pages/public/setting')">
					<image class="user-config" :src="sheep.$url.static('/assets/img/user-config@2x.png')" mode="aspectFill"></image>
				</button>
			</view>
			<view class="right-box ss-flex ss-col-center ss-m-l-16">
				<view @click="navigateToTargetPage" class="avatar-box ss-m-r-24">
					<image class="avatar-img" :src="
              isLogin
                ? (sheep.$url.cdn(userInfo.avatar)?sheep.$url.cdn(userInfo.avatar):sheep.$url.static('/assets/img/zqlist-header.png'))
                : sheep.$url.static('/assets/img/zqlist-header.png')
            " mode="aspectFill"></image>
				</view>
				<view>
					<view @click="navigateToTargetPage" class="nickname-box ss-flex ss-col-center">
						<view class="nick-name ss-m-r-20 font-AlibabaPuHuiTiSemiBold">{{ userInfo?.nickname || nickname }}</view>
					</view>
					<view v-show="isLogin" class="id-box ss-flex ss-col-center">
						<view class="id-left">ID</view>
						<view class="id-right" @tap="onCopy">
							<view class="id-name ss-m-r-20 font-PingFangBold">
								{{ userInfo.userId }}
							</view>
							<image class="user-fuzhi" :src="sheep.$url.static('/assets/img/user-fuzhi@2x.png')" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			
			<!-- <view class="right-box ss-m-r-52">
				<button class="ss-reset-button" @tap="showShareModal">
					<text class="sicon-qrcode"></text>
				</button>
			</view> -->
		</view>

    <!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
    <view
      class="bind-mobile-box ss-flex ss-row-between ss-col-center"
      v-if="isLogin && !userInfo.mobile"
    >
      <view class="ss-flex">
        <text class="cicon-mobile-o" />
        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
      </view>
      <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
    </view>
  </view>
</template>

<script setup>
  /**
   * 用户卡片
   *
   * @property {Number} leftSpace 									- 容器左间距
   * @property {Number} rightSpace 									- 容器右间距
   *
   * @property {String} avatar 					- 头像
   * @property {String} nickname 					- 昵称
   * @property {String} vip		  				- 等级
   * @property {String} collectNum 				- 收藏数
   * @property {String} likeNum 					- 点赞数
   *
   *
   */

  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';
  import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';

  // 用户信息
  const userInfo = computed(() => sheep.$store('user').userInfo);
  console.log('用户信息', userInfo);

	// 是否登录
	const isLogin = computed(() => sheep.$store('user').isLogin);
	// 接收参数
	const props = defineProps({
		background: {
			type: String,
			default: '',
		},
		// 头像
		avatar: {
			type: String,
			default: '',
		},
		nickname: {
			type: String,
			default: '请先登录',
		},
		id: {
			type: String,
			default: '',
		},
		vip: {
			type: [String, Number],
			default: '1',
		},
		collectNum: {
			type: [String, Number],
			default: '1',
		},
		likeNum: {
			type: [String, Number],
			default: '1',
		},
	});
  function navigateToTargetPage() {
    if (isLogin){
      sheep.$router.go('/pages/user/info')
    }else{
      uni.navigateTo({
        url: '/pages/index/login-index'
      });
    }

  }

  function onBind() {
    showAuthModal('changeMobile');
  }

  // 复制
  const onCopy = () => {
    uni.setClipboardData({
      data: userInfo.value.userId,
      success: function() {
        sheep.$helper.toast('已复制用户ID到剪切板')
      },
    });
  };
</script>

<style lang="scss" scoped>
	.ss-user-info-wrap {
		box-sizing: border-box;
		.avatar-box {
			width: 100rpx;
			height: 100rpx;
			// border-radius: 50%;
			overflow: hidden;
			border-radius: 4rpx 4rpx 4rpx 4rpx;

      .avatar-img {
        width: 100%;
        height: 100%;
      }
    }
		.nick-name {
			height: 34rpx;
			white-space: nowrap;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 40rpx;
			color: #232323;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.id-box{
			margin-top: 12rpx;
			.id-left{
				box-sizing: border-box;
				margin: 0rpx;
				background-color: #666666;
				width: 42rpx;
				height: 36rpx;
				border-radius: 4rpx;
				color: #FFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
			.id-right{
				box-sizing: border-box;
				border: #666666 solid 2rpx;
				border-left: none;
				position: relative;
				right: 6rpx;
				border-radius: 4rpx;
				height: 36rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				padding-right: 8rpx;
				.id-name{
					margin-left: 12rpx;
					white-space: nowrap;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 24rpx;
					color: #232323;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-right: 0;
				}
				.user-fuzhi{
					margin-left: 12rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}
			
		}
		

    .vip-img {
      width: 30rpx;
      height: 30rpx;
    }

		.sicon-qrcode {
			font-size: 40rpx;
		}
		.outer-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			.left-box{
				align-self: flex-end;
				display: flex;
				flex-direction: row;
				height: 100rpx;
				width: 124rpx;
				justify-content: space-between;
				margin: 0;
				.user-xiaoxi, .user-config{
					width: 50rpx;
					height: 50rpx;
				}
				
			}
			.right-box{
				align-self: flex-start;
			}
		}
		
	}

  .bind-mobile-box {
    width: 100%;
    height: 84rpx;
    padding: 0 34rpx 0 44rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);

    .cicon-mobile-o {
      font-size: 30rpx;
      color: #ff690d;
    }

    .mobile-title {
      font-size: 24rpx;
      font-weight: 500;
      color: #ff690d;
    }

    .bind-btn {
      width: 100rpx;
      height: 50rpx;
      background: #ff6100;
      border-radius: 25rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }
</style>
